<template>
    <div>
        <banner :sightName='sightName' :bannerImg='bannerImg' :gallaryImgs='gallaryImgs'></banner>
        <detailHead class="detailHeader"></detailHead>
        <list :ticket='ticket'></list>    
    </div>
</template>
<script>
//import banner from './pages/banner'
import detailHead from './pages/header'
import list from './pages/list'
import axios from 'axios'
export default {
    name:'detail',
    components: {
        banner :() => import('./pages/banner'),// 这也是异步加载
        detailHead,
        list
    },
    data(){
        return {
            sightName: '',
            bannerImg: '',
            gallaryImgs: [],
            ticket: []
        }
    },
    methods: {
        getBannerInfo(){
            axios.get('/api/detail.json', {
                params: {
                    id:this.$route.params.id
                }
            }).then(this.getInfoSucc)
        },
        getInfoSucc(res){
            var res = res.data;
            if(res && res.data){
                var data = res.data;
                this.sightName = data.sightName;
                this.bannerImg = data.bannerImg;
                this.ticket = data.categoryList;
                this.gallaryImgs = data.gallaryImgs;
            }
        }
    },
    mounted(){
        this.getBannerInfo();
    },
    // activated(){
    //     this.getBannerInfo();//通过这个勾子函数也可以清除缓存
    // }
}
</script>
 <style lang="stylus" scoped>
    
 </style>
 

